<%--
  Created by IntelliJ IDEA.
  User: xiaoji
  Date: 2014/11/12
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<%@ taglib prefix="spring" uri="/WEB-INF/lib/spring.tld"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title><spring:message code='usercenter.index.title' /></title>
    <link href="${path}/style/acg/css/style.css" rel="stylesheet" type="text/css" />
    <script src="${path}/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<jsp:include page="../public/header.jsp">
    <jsp:param    name="usercenter"    value="true"    />
</jsp:include>
<jsp:include page="../usercenter/leftMenu.jsp"></jsp:include>
<div class="member_box">
    <div class="member_title">
        <ul>
            <li class="hover"><a href="javascript:void(0);"><spring:message code='usercenter.proManager.msg1' /></a></li>
            <li><a href="${path}/memorder/toProOrder.html" ><spring:message code='usercenter.proManager.msg2' /></a></li>
        </ul>
        <span><a href="javascript:void(0);" class="btnadd" id="addPhoto"><spring:message code='usercenter.proManager.msg3' /></a></span>
    </div>
    <div class="member_albumbox clearfix" id="pview">
        <c:forEach items="${photos}" var="p">
        <div class="member_albumlist">
            <div class="photolist" style="cursor: pointer" onclick="javascript:window.location='${path}/usercenter/getArtistProByPhotoId.html?photoId=${p.photo_id}';">
                <ul class="clearfix">
                    <c:set var="total" value="0"></c:set>
                    <c:forTokens items="${p.cover}" delims="," var="imgsrc" varStatus="k">
                        <c:if test="${imgsrc!='' && total<12}">
                                <c:set var="total" value="${total+1}"></c:set>
                               <li><img src="${path}/${imgsrc}" width="80" height="49"></li>
                        </c:if>
                    </c:forTokens>
                </ul>
            </div>
            <div class="albumopr">
                <span><a href="javascript:void(0);" onclick="updatePhoto('${p.photo_id}')"><spring:message code='usercenter.proManager.msg4' /></a></span>
                <span><a href="javascript:void(0);" onclick="delPhoto('${p.photo_id}','${p.photo_name}')"><spring:message code='usercenter.proManager.msg5' /></a></span>
                <em id="photo${p.photo_id}" title="${p.photo_name}">
                <c:if test="${fn:length(p.photo_name) > 10}">
                        ${fn:substring(p.photo_name,0,10)}...
                </c:if>
                <c:if test="${fn:length(p.photo_name) <= 10}">
                        ${p.photo_name}
                </c:if>
                </em>
            </div>
        </div>
        </c:forEach>
        <!--模板-->
        <div class="member_albumlist" id="photosView" style="display: none">
            <div class="photolist">
                <ul class="clearfix">

                </ul>
            </div>
            <div class="albumopr">
                <span><a href="javascript:void(0);" id="addButton"><spring:message code='usercenter.proManager.msg6' /></a></span>
                <span><input type="text" id="photoName" name="photoName" style="height: 20px;"/></span>
            </div>
        </div>
        <!--模板-->
        <div class="clr"></div>
    </div>
    <%--<div class="loadmore"><a href="javascript:void(0);"><spring:message code='usercenter.proManager.msg7' /></a></div>--%>
</div>

<script>
    function updatePhoto(photoId){
        var str = $("#photo"+photoId).attr("title");
        var htmlstr = '<input type="text" style="width:100px;height: 20px;" value="'+str+'" id="photoName'+photoId+'" onblur="editPhoto('+photoId+')">';
        if($("#photoName"+photoId).val() == undefined){
            $("#photo"+photoId).html(htmlstr);
        }

    }
    function editPhoto(photoId){
        $.post("${path}/usercenter/updatePhoto.html",{
            photoName:$("#photoName"+photoId).val(),
            photoId:photoId
        },function(data){
            if(data.status == 1){
                $("#photo"+photoId).attr("title",data.photoName);
                if(data.photoName.length > 10){
                    data.photoName = data.photoName.substring(0,10) + "...";
                }

                $("#photo"+photoId).html(data.photoName)
            }
        },"json");
    }
    function delPhoto(photoId,title){
        if(confirm("您确定要删除删除专辑《"+title+"》!")){
            $.post("${path}/usercenter/deletePhoto.html",{
                photoId:photoId
            },function(data){
                if(data.status == 1){
                    location.reload();
                }else{
                    alert("<spring:message code='usercenter.proManager.msg8' />");
                }
            },"json");
        }

    }
    $(function(){
        $("#addPhoto").click(function(){
            $("#photoName").val("");
            $("#photosView").show();
        });
        $("#addButton").click(function(data){
            var photoName = $("#photoName").val();
            if(photoName != ''){
                $.post("${path}/usercenter/addPhoto.html",{
                    photoName : photoName
                },function(data){
                    if(data.status == 1){
                        var result = '<div class="member_albumlist">'+
                        '<div class="photolist" style="cursor: pointer" onclick="javascript:window.location=\'${path}/usercenter/getArtistProByPhotoId.html?photoId='+data.photo_id+'\';">'+
                                '<ul class="clearfix">'+
                        '</ul>'+
                        '</div>'+
                        '<div class="albumopr">'+
                        '<span><a href="javascript:void(0);" onclick="updatePhoto('+data.photo_id+')"><spring:message code='usercenter.proManager.msg4' /></a></span>'+
                        '<span><a href="javascript:void(0);" onclick="delPhoto('+data.photo_id+','+data.photoName+')"><spring:message code='usercenter.proManager.msg5' /></a></span>'+
                        '<em id="photo'+data.photo_id+'" title="'+data.photoName+'">'+data.photoName+'</em>'+
                        '</div>'+
                        '</div>';
                        $("#photosView").before(result);
                        $("#photosView").hide();
                    }
                },"json");
            }
        });
    });
</script>
<jsp:include page="../usercenter/leftMenuEnd.jsp"></jsp:include>
<jsp:include page="../public/footer.jsp"></jsp:include>
</body>
</html>